<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交互式数据可视化期末项目</title>
    <style type="text/css">
    	div.content {padding: 1em 5em;}
    	div.graph {margin: 10px auto;
    		       width: 70%;}

    </style>
    <!--导入js库文件-->
    <script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <link
            rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
            crossorigin="anonymous"
    />

    <link
            href="http://getbootstrap.com/docs/3.4/examples/jumbotron-narrow/jumbotron-narrow.css"
            rel="stylesheet"
    />
    <link href="../static/css/signup.css" rel="stylesheet"/>
    <link rel="icon" href="/static/favicon.ico">


</head>

<body>
<div class="container">
    <div class="header">
        <nav>
            <ul class="nav nav-pills justify-content-end">
                <li class="nav-item">
                    <a class="nav-link active" href="/">第一页面</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/page_second">第二页面</a>
                </li>
                <li rclass="nav-item">
                    <a class="nav-link" href="/page_final">最后页面</a>
                </li>
            </ul>
        </nav>
        <h3 class="text-muted">一起来了解网络与新媒体</h3>
    </div>

    <div>
        <h4 class="text-muted"></h4>
        <p>
            这个专业是一个非常新鲜的专业，为了让更多的人来了解它，我从几个方面的数据入手。首先我们来看下网络与新媒体中男女构成占比。
        </p>
    </div>

    <div>
        <h5 class="text-muted"></h5>
        <p>数据来源：https://www.zhihu.com/question/22448952/answer/1773878798</p>
        <p>数据名称：普通高等教育本专科的男女比例（持续更新）</p>
        <div class='content'>
            <div class='graph'>
                <!--展现可视化图标部分-->
                <h1> {{context.graph |safe }} </h1>
            </div>
        </div>
    </div>

    <div>
        <h5 class="text-muted"></h5>
        <p>数据来源：http://www.creditsailing.com/DaXueZYPM/1420015.html</p>
        <p>数据名称：网络与新媒体专业的男女比例</p>
        <div class='content'>
            <div class='graph'>
                <!--展现可视化图标部分-->
                <h1> {{context.graph2 |safe }} </h1>
            </div>
        </div>
    </div>

    <div>
        <h4 class="text-muted"></h4>
        <p>
            可以看出，虽然本科中男女比例比较协调，但是在这一个专业中女生的比例是远远大于男生的。
        </p>
    </div>

    <footer class="footer">
        <p><a href="https://gitee.com/coldmeaning/dashboard/projects">&copy; ColdMeaning 广州南方学院 网络与新媒体专业</p>
    </footer>
</div>
</body>
</html>

<style>
    body{
        background: url("https://img.zcool.cn/community/014d4c596e3e52a8012193a3f70204.jpg@1280w_1l_2o_100sh.jpg") no-repeat;
        background-size: 100% 100%;
    }
</style>